<template>
	<div>
		<commons-alert @alert-dismissed="alertDismissed" :dismissCountDown="alert.dismissCountDown" :variant="alert.variant">{{alert.message}}</commons-alert>
		<b-container class="m-0 p-0" fluid>
			<b-row v-for="(ds, index) in groupItems" :key="'ds_' + index">
				<b-col cols="12">
					<b-container class="m-0 p-0" fluid>
						<b-row>
							<b-col class="p-1" cols="3" v-for="d in ds" :key="'d_' + d.id" :class="{'simple-medias-image-extends': borders[d.fileName]}">
								<a @click="toggleCollapse(d)">
									<img v-if="d.wasImage" :src="d.url" :alt="d.alt" class="simple-medias-image" />
									<div class="simple-medias-div" :href="d.url" v-else>{{getFileSubfix(d.fileName)}}</div>
								</a>
							</b-col>
						</b-row>
						<b-row>
							<b-col cols="12">
								<div v-show="collapseState[d.fileName]" v-for="d in ds" :key="'dd_' + d.id">
									<div><b>文件名:</b> {{d.originFileName}}</div>
									<div><b>文件大小:</b> {{hFileSize(d.fileSize)}}</div>
									<div><b>文件类型:</b> {{d.fileType}}</div>
									<div><b>上传时间:</b> {{dateTimeFormat(d.uploadTime)}}</div>
									<div><b>替代文本:</b> {{d.alt}}</div>
									<div><b>标题:</b> {{d.title}}</div>
									<div><b>说明:</b> {{d.remark}}</div>
									<div><b>URL:</b> {{d.url}}
										<b>
											<b-icon @click="onCopy(d.url)" v-b-tooltip.hover title="复制到剪贴板" icon="clipboard-plus"></b-icon>
										</b>
									</div>
								</div>
							</b-col>
						</b-row>
					</b-container>
				</b-col>
			</b-row>
			<b-pagination v-model="page.currentPage" :total-rows="page.totalRows" :per-page="page.perPage" align="center"
			 first-number last-number></b-pagination>
		</b-container>
	</div>
</template>

<script>
	import gl from '../../commons/global_variable.js'
	import axios from 'axios'
	import CommonsAlert from '../../commons/Alert.vue'
	import wg from '../../commons/utils.js'

	export default {
		name: "simple-medias",
		components: {
			CommonsAlert
		},
		data: function() {
			return {
				alert: {
					message: '',
					variant: 'warning',
					dismissCountDown: 0
				},
				page: {
					currentPage: 1,
					totalRows: 0,
					perPage: 24
				},
				collapseState: {},
				borders: {},
				items: []
			}
		},
		created: function() {
			this.getItems()
		},
		computed: {
			groupItems: function() {
				var datas = []
				for (var i = 0; i < this.items.length;) {
					var data = []
					for (var x = 0; x < 4; x++) {
						var obj = this.items[i++]
						if (!!obj) {
							data.push(obj)
						}
					}
					datas.push(data)
				}
				return datas
			}
		},
		methods: {
			onCopy: function(value) {
				this.$copyText(value).then(function(e) {
					console.log("Copy Success", e)
				}, function(e) {
					console.log("Can Not Copy", e)
				})
			},
			dateTimeFormat: function(value) {
				return wg.utils.formatDateTime(value)
			},
			hFileSize: function(value) {
				return wg.utils.hFileSize(value)
			},
			toggleCollapse: function(item) {
				var before = !!this.collapseState[item.fileName]
				this.collapseState = {}
				this.$set(this.collapseState, item.fileName, !before)
				var extendBefore = !!this.borders[item.fileName]
				this.borders = {}
				this.$set(this.borders, item.fileName, !extendBefore)
			},
			getItems: function() {
				var that = this
				axios.post(gl.cms_args.server_url + 'media/list', {
					page: that.page.currentPage,
					size: that.page.perPage
				}).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.items = res.data.records
						that.page.perPage = res.data.size
						that.page.totalRows = res.data.total
					} else {
						that.onQueryError()
					}
				}).catch(function(error) {
					that.onQueryError()
				})
			},
			alertDismissed: function() {
				this.alert.dismissCountDown = 0
			},
			onQueryError: function() {
				this.alert.message = "查询失败"
				this.alert.dismissCountDown = 3
			},
			getFileSubfix: function(fileName) {
				var idx = fileName.lastIndexOf(".")
				return fileName.substring(idx + 1)
			}
		},
		watch: {
			"page.currentPage": function() {
				this.getItems()
			}
		}
	}
</script>

<style>
	.simple-medias-image {
		width: 5rem;
		height: 5rem;
		cursor: pointer;
	}

	.simple-medias-image-extends {
		border: 0.125rem dotted gray;
	}

	.simple-medias-div {
		height: 5rem;
		line-height: 5rem;
		display: block;
		text-align: center;
		font-weight: bolder;
		overflow: hidden;
		cursor: pointer;
	}
</style>
